import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const channelStore = createSlice({
    name: 'channel',
    initialState: {
        channelList: []
    },
    reducers: {
        setChannels(state, action) {
            state.channelList = action.payload;
        }
    }
});


const { setChannels } = channelStore.actions;
const channelReducer = channelStore.reducer;

// 异步请求部分
const innerFetchChannelList = ()=> {
    return async (dispatch) => {
        const res = await axios.get('http://localhost:3005/channels');
        dispatch(setChannels(res.data));
    };
};

export { setChannels, innerFetchChannelList };
export default channelReducer;

/**
 * 异步 store
 * 
 * 1. 创建 store 的写法不变，配置好同步修改状态的方法。
 * 2. 单独封装一个函数，在函数内部 return 一个新函数。
 * 3. 在新函数中封装异步请求获取数据。
 * 4. 调用同步 actionCreator 传入异步数据生成一个 action 对象，并使用 dispatch 提交。
 * 5. 组件中 dispatch 的写法保持不变。
 */